<template>
    <view>
        <view v-if="isLoad === null" class="margin-top load notexist text-l text-grey"></view>
        <view v-if="isLoad === false" class="margin-top load loading text-l text-grey"></view>

        <block v-if="isAdmin && isLoad">
            <!-- parse <include src="admin_meet_join_tpl.wxml"/> -->
            <block>
                <cmpt-comm-list
                    :source="oprt"
                    id="cmpt-comm-list"
                    :type="oprt + '-meet-join-list'"
                    :search="search || ''"
                    :_params="params"
                    :_menus="sortMenus"
                    :_items="sortItems"
                    route="/meet/adminJoinList"
                    topBottom="50"
                    placeholder="搜索姓名，手机等"
                    sortMenusDefaultIndex="0"
                    @list="bindCommListCmpt($event, { tagId: 'cmpt-comm-list' })"
                >
                    <view slot="searchEnd">
                        <button @tap="bindCancelAllTap" class="btn mid radius bg-orange margin-right-xs">取消所有</button>
                    </view>

                    <!-- List Begin -->
                    <view class="join-list">
                        <view class="time-line text-grey">({{ time }})</view>
                        <view v-if="dataList && dataList.total" class="load text-grey">
                            共有{{ dataList.total }}条符合条件记录
                            <text v-if="isAllFold" @tap="bindUnFoldAllTap" class="margin-left-xs icon-unfold text-blue">全部展开</text>
                            <text v-else @tap="bindFoldAllTap" class="margin-left-xs icon-fold text-blue">全部收起</text>
                        </view>

                        <view class="item" v-for="(item, index) in dataList.list" :key="index">
                            <view class="header">
                                <view class="left">
                                    <text class="icon-calendar margin-right-xxs"></text>
                                    <text class="">{{ item.day }} ({{ item.timeStart }}～{{ item.timeEnd }})</text>
                                </view>
                                <view class="right" @tap="bindCopyTap" :data-idx="index">
                                    <text class="icon-copy margin-right-xxs"></text>
                                    复制资料
                                </view>
                            </view>

                            <view class="info">
                                <view class="info-item">
                                    <view class="title text-blue">状态</view>
                                    <view class="mao">：</view>
                                    <view class="content">
                                        <view v-if="item.status == 1" class="text-black">
                                            <text class="icon-roundcheck margin-right-xxs"></text>
                                            预约成功
                                            <text v-if="item.isCheckin == 1">，已核销</text>
                                            <text class="text-grey" v-else>，未核销</text>
                                        </view>
                                        <view v-else-if="item.status == 10">用户取消</view>
                                        <view v-else-if="item.status == 99">系统取消</view>
                                    </view>
                                </view>

                                <view class="info-item" v-if="item.status == 99">
                                    <view class="title text-blue">取消原因</view>
                                    <view class="mao">：</view>
                                    <view class="content">{{ item.reason || '未填' }}</view>
                                </view>
                                <view class="info-item" v-if="item.status == 8">
                                    <view class="title text-orange">未通过原因</view>
                                    <view class="mao">：</view>
                                    <view class="content">{{ item.reason || '未填' }}</view>
                                </view>

                                <view class="info-item" v-if="formindex < 3 || !item.fold" v-for="(form, formindex) in item.forms" :key="formindex">
                                    <view class="title">{{ form.title }}</view>

                                    <view class="mao">：</view>

                                    <view v-if="form.type == 'mobile'" class="content" @tap="url" data-type="phone" :data-url="form.val">
                                        <text :class="form.val === search ? 'text-red text-bold' : ''">{{ form.val }}</text>
                                        <text class="margin-left-xs icon-phone text-black text-normal"></text>
                                    </view>

                                    <view v-else class="content" @tap="url" data-type="copy" :data-url="form.title + '：' + form.val">
                                        <text :class="form.val === search ? 'text-red text-bold' : ''">{{ form.val }}</text>
                                    </view>
                                </view>
                                <view @tap="bindUnFoldTap" :data-idx="index" v-if="item.fold && item.forms.length > 3" class="fold">
                                    <text class="icon-unfold margin-right-xs"></text>
                                    更多资料...
                                </view>

                                <view @tap="bindFoldTap" :data-idx="index" v-if="!item.fold && item.forms.length > 3" class="fold">
                                    <text class="icon-fold margin-right-xs"></text>
                                    收起
                                </view>

                                <view class="info-item add-time">
                                    <view class="title text-grey">提交</view>
                                    <view class="mao text-grey">：</view>
                                    <view class="content text-grey">{{ item.createdTime }}</view>
                                </view>
                                <view class="info-item" v-if="item.isCheckin == 1">
                                    <view class="title text-grey" style="font-weight: normal">核销</view>
                                    <view class="mao text-grey" style="font-weight: normal">：</view>
                                    <view class="content text-grey" style="font-weight: normal">{{ item.checkinTime }}</view>
                                </view>

                                <view class="oprt">
                                    <block v-if="item.status == 1">
                                        <view v-if="item.isCheckin == 0" @tap="bindCheckinTap" :data-idx="index" data-flag="1" class="btn bg-purple margin-right-s light">
                                            核销预约
                                        </view>

                                        <view v-else @tap="bindCheckinTap" :data-idx="index" data-flag="0" class="btn bg-grey light margin-right-s">取消核销</view>
                                    </block>

                                    <block v-if="item.status == 1">
                                        <view @tap="bindCancelTap" :data-idx="index" data-status="99" :data-old="item.status" class="btn bg-grey light margin-right-s">
                                            取消预约
                                        </view>
                                    </block>

                                    <block v-if="item.status == 10 || item.status == 99">
                                        <view @tap="bindStatusTap" :data-idx="index" data-status="1" :data-old="item.status" class="btn bg-olive light margin-right-s">
                                            恢复预约
                                        </view>
                                    </block>

                                    <view @tap="bindDelTap" :data-idx="index" class="btn bg-orange light margin-right-s">删除</view>
                                </view>
                            </view>

                            <view class="no">{{ index + 1 }}</view>
                        </view>
                    </view>
                    <!-- List END -->

                    <!-- load begin -->

                    <!-- parse <template is="listLoadTpl" :data="dataList,skin:'text-grey',noHint:'暂无记录'"/> -->
                    <block name="listLoadTpl">
                        <view v-if="!dataList || (dataList && dataList.page < dataList.count)" :class="'load text-grey loading ' + 'text-grey'"></view>
                        <view v-if="dataList && dataList.page > 1 && dataList.page == dataList.count" :class="'load text-grey over ' + 'text-grey'"></view>

                        <block v-if="noHintImg">
                            <image style="height: 500rpx" mode="aspectFit" v-if="dataList && dataList.total == 0" :src="noHintImg" />
                        </block>

                        <block v-else>
                            <view v-if="dataList && dataList.total == 0" :class="'load text-grey ' + 'text-grey'">{{ '暂无记录' ? '暂无记录' : '暂无记录哦~' }}</view>
                        </block>

                        <view style="height: 200rpx"></view>
                    </block>
                    <!-- load end -->
                </cmpt-comm-list>

                <cmpt-modal
                    v-if="cancelAllModalShow"
                    :show.sync="cancelAllModalShow"
                    type="dialog"
                    title="取消所有预约"
                    @click="bindCancelAllCmpt"
                    class="modal-form"
                    cancelText="返回"
                    confirmText="确定取消"
                >
                    <view class="form-group" style="padding: 0 10rpx">
                        <view class="title">
                            取消理由
                            <text class="text-grey text-mid">(选填)</text>
                            ：
                        </view>
                        <view @tap="bindClearReasonTap" style="width: 150rpx; text-align: right" class="text-grey">
                            <text class="icon-roundclose"></text>
                            清空
                        </view>
                    </view>

                    <view class="form-group cancel-area">
                        <textarea placeholder-class="phc" placeholder="请输入取消理由 (非必填)" style="height: 110rpx" v-model="formReason" maxlength="100"></textarea>
                    </view>
                </cmpt-modal>

                <cmpt-modal
                    v-if="cancelModalShow"
                    :show.sync="cancelModalShow"
                    type="dialog"
                    title="取消预约"
                    @click="bindCancelCmpt"
                    class="modal-form"
                    cancelText="返回"
                    confirmText="确定取消"
                >
                    <view class="form-group" style="padding: 0 10rpx">
                        <view class="title">
                            取消理由
                            <text class="text-grey text-mid">(选填)</text>
                            ：
                        </view>
                        <view @tap="bindClearReasonTap" style="width: 150rpx; text-align: right" class="text-grey">
                            <text class="icon-roundclose"></text>
                            清空
                        </view>
                    </view>

                    <view class="form-group cancel-area">
                        <textarea placeholder-class="phc" placeholder="请输入取消理由 (非必填)" style="height: 110rpx" v-model="formReason" maxlength="100"></textarea>
                    </view>
                </cmpt-modal>

                <cmpt-modal
                    v-if="refuseModalShow"
                    :show.sync="refuseModalShow"
                    type="dialog"
                    title="审核不通过"
                    @click="bindRefuseCmpt"
                    class="modal-form"
                    cancelText="返回"
                    confirmText="确定"
                >
                    <view class="form-group" style="padding: 0 10rpx">
                        <view class="title">
                            不通过理由
                            <text class="text-grey text-mid">(选填)</text>
                            ：
                        </view>
                        <view @tap="bindClearReasonTap" style="width: 150rpx; text-align: right" class="text-grey">
                            <text class="icon-roundclose"></text>
                            清空
                        </view>
                    </view>

                    <view class="form-group cancel-area">
                        <textarea
                            placeholder-class="phc"
                            placeholder="请输入审核不通过理由 (非必填)，将通知给用户"
                            style="height: 110rpx"
                            v-model="formReason"
                            maxlength="100"
                        ></textarea>
                    </view>
                </cmpt-modal>
            </block>
        </block>
    </view>
</template>

<script>
const AdminBiz = require('@/utils/comm/biz/admin_biz.js');
const behavior = require('@/utils/meet/admin_meet_join_bh.js');
export default {
    data() {
        return {
            isLoad: '',
            isAdmin: '',
            oprt: '',
            search: '',
            params: '',
            sortMenus: '',
            sortItems: '',
            time: '',

            dataList: {
                total: '',
                list: [],
                page: 0,
                count: 0
            },

            isAllFold: false,
            formindex: 0,

            form: {
                title: '',
                type: '',
                val: '',
                valArr: []
            },

            valItem: '',
            noHintImg: '',
            cancelAllModalShow: '',
            formReason: '',
            cancelModalShow: '',
            refuseModalShow: ''
        };
    },
    mixins: [behavior],
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (!AdminBiz.isAdmin(this)) {
            return;
        }
        this._init(options);
    },
    methods: {
    //     bindCommListCmpt(e, _dataset) {
    //         /* ---处理dataset begin--- */
    //         this.handleDataset(e, _dataset);
    //         /* ---处理dataset end--- */
    //         console.log('占位：函数 bindCommListCmpt 未声明');
    //     },

    //     bindCancelAllTap() {
    //         console.log('占位：函数 bindCancelAllTap 未声明');
    //     },

    //     bindUnFoldAllTap() {
    //         console.log('占位：函数 bindUnFoldAllTap 未声明');
    //     },

    //     bindFoldAllTap() {
    //         console.log('占位：函数 bindFoldAllTap 未声明');
    //     },

    //     bindCopyTap() {
    //         console.log('占位：函数 bindCopyTap 未声明');
    //     },

    //     url(e, _dataset) {
    //         /* ---处理dataset begin--- */
    //         this.handleDataset(e, _dataset);
    //         /* ---处理dataset end--- */
    //         pageHelper.url(e, this);
    //     },

    //     bindUnFoldTap() {
    //         console.log('占位：函数 bindUnFoldTap 未声明');
    //     },

    //     bindFoldTap() {
    //         console.log('占位：函数 bindFoldTap 未声明');
    //     },

    //     bindCheckinTap() {
    //         console.log('占位：函数 bindCheckinTap 未声明');
    //     },

    //     bindCancelTap() {
    //         console.log('占位：函数 bindCancelTap 未声明');
    //     },

    //     bindStatusTap() {
    //         console.log('占位：函数 bindStatusTap 未声明');
    //     },

    //     bindDelTap() {
    //         console.log('占位：函数 bindDelTap 未声明');
    //     },

    //     bindCancelAllCmpt() {
    //         console.log('占位：函数 bindCancelAllCmpt 未声明');
    //     },

    //     bindClearReasonTap() {
    //         console.log('占位：函数 bindClearReasonTap 未声明');
    //     },

    //     bindCancelCmpt() {
    //         console.log('占位：函数 bindCancelCmpt 未声明');
    //     },

    //     bindRefuseCmpt() {
    //         console.log('占位：函数 bindRefuseCmpt 未声明');
    //     }
    }
};
</script>
<style>
@import './admin_meet_join.css';
</style>
